<template>
    <el-dialog v-model="Props.dialogVisible" :title="Props.title" :before-close="close" :destroy-on-close="true"  custom-class="popwindow"
        :width="Props.sizeType == 'small' ? '534px' : Props.sizeType == 'normal' ? '660px' : Props.sizeType == 'large' ? '900px' : '660px'"
        :close-on-click-modal="defaultModel" :show-close="defaultModel">
        <slot name="header" v-if="Props.title"></slot>
        <div :style="'max-height:500px;overflow:auto;' + styles">
            <slot></slot>
        </div>
        <div class="popWindowbtns">
            <el-button v-if="Props.btnType != 3&&Props.btnType!=0" @click="close">{{ Props.btnType == 4 ? '关 闭' : '取 消' }}</el-button>
            <slot name="footer"></slot>
            <el-button color="#0369AB" style="color:#fff;" @click="onSubmit" v-if="Props.btnType != 4 && Props.btnType != 5&& Props.btnType != 0">
                {{ Props.btnType == 1 ? '保存' : Props.btnType == 6 ? '确认' : '确定' }}</el-button>
        </div>
    </el-dialog>
</template>

<!-- 弹窗 -->
<script lang="ts" setup>
const Props = defineProps({
    title: {
        type: String,
        required: true
    },
    dialogVisible: {
        type: Boolean,
        required: true,
        default: false
    },
    sizeType: {
        type: String,
        default: 'normal'
    },
    btnType: {
        // 1 取消 保存 2 取消 确定 3 确定 4 关闭 5 取消 6 取消 确认
        type: Number,
        default: 1
    },
    styles: {
        type: String,
        vlaue: ''
    },
    defaultModel:{
        type: Boolean,
        vlaue: false
    },
})
const emit = defineEmits(['closeWin'])
const close = () => {
    emit('closeWin', false)
}
const onSubmit = () => {
    emit('closeWin', true)
}
</script>

<style lang='scss'>
.popwindow {
    .el-dialog {
        border-radius: 2px;
    }

    .el-dialog__header {
        height: 40px;
        background: #0369AB;
        border-radius: 2px 2px 0 0;
        color: #fff;
        display: flex;
        align-items: center;
        padding: 0;
        padding-bottom: 0px;
        margin-right: 0px !important;
    }
    .el-dialog__headerbtn{
        top:0;
    }
    .el-dialog__title {
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        margin-left: 32px;
        position: relative;
    }

    .el-dialog__title::after {
        content: '';
        width: 4px;
        height: 18px;
        background: #FE8F2A;
        border-radius: 2px;
        position: absolute;
        left: -12px;
        top: 4px;
    }

    .el-dialog__body {
        padding: 24px 20px;
    }

    .popWindowbtns {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }
}
</style>
